<!--
 * @Date: 2020-09-21 18:25:45
 * @LastEditTime: 2020-09-29 17:02:02
 * @Description: 救援队伍popup
-->
<template>
  <div class="tab_box">
    <div class="head_box">
      <select class="search_select" v-model="streetId" @change="changeselect">
        <option v-for="item in streeList" :key="item.id" :value="item.id">{{item.streetName}}</option>
      </select>
      <select class="search_select" v-model="typeId" @change="changeselect">
        <option :value="0">全部</option>
        <option v-for="item in TeamTypeList" :key="item.id" :value="item.id">{{item.teamTypeName}}</option>
      </select>
      <div class="search_box">
        <div @click="getRescueTeamList" class="search_icon"></div>
        <input
          v-model="teamName"
          type="text"
          @keyup.enter="getRescueTeamList"
          placeholder="请输入搜索队伍"
          class="search"
        />
      </div>
      <div class="closeBtn" @click="close">
        <!-- <img src="../../assets/images/notice_closeW.png" alt="" srcset=""> -->
      </div>
      <!-- <input type="text" class="Search_box" /> -->
    </div>
    <div style="width:100%;max-height:811px;">
      <div class="container" style="width:99%;">
        <table>
          <thead>
            <tr>
              <th class="trClas">队伍名称</th>
              <th class="trClas">级别</th>
              <th class="trClas">人数</th>
              <th class="trClas">负责人</th>
              <th class="trClas">联络人</th>
              <th class="trClas">联系电话</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item,index) in Rescueteamlist"
              :key="index"
              :class="[item.state==1?'bg':'',listIndex === index ? 'trBg':'']"
              @click="trDbclick(item,index)"
            >
              <td class="trClas">{{item.teamName}}</td>
              <td class="trClas">{{item.level}}</td>
              <td class="trClas">{{item.number}}</td>
              <td class="trClas">{{item.responsiblePeople}}</td>
              <td class="trClas">{{item.linkman}}</td>
              <td class="trClas">{{item.phone}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import { getRescueTeamList, getTeamTypeList } from '@/api/index'
export default {
  data () {
    return {
      Rescueteamlist: [],
      TeamTypeList: [],
      typeId: 0,
      streetId: null,
      teamName: '',
      listIndex: -1 // 选中第几个
    }
  },
  computed: {
    streeList () {
      return this.$store.getters.getstree
    }
  },
  mounted () {
    this.getTeamTypeList()
    setTimeout(() => {
      this.getRescueTeamList()
    }, 500)
    this.getRescueTeamList()
  },
  methods: {
    // 双击行
    trDbclick (item, index) {
      this.listIndex = index
      this.$emit('trdblclick', {
        id: item.id,
        firstTag: 'yjzy',
        tag: 'yjzyJYDW',
        lng: item.x,
        lat: item.y,
        ...item
      })
    },
    changeselect () {
      this.getRescueTeamList()
    },
    close () {
      this.$emit('close')
    },
    getTeamTypeList () {
      getTeamTypeList().then((res) => {
        if (res.code === 200) {
          this.TeamTypeList = res.result
        }
      })
    },
    getRescueTeamList () {
      const params = {}
      if (this.typeId) params.id = this.typeId
      if (this.streetId) params.streetId = this.streetId
      if (this.teamName) params.teamName = this.teamName
      getRescueTeamList(params).then((res) => {
        if (res.code === 200) {
          this.Rescueteamlist = res.result
          this.$emit('getlist', res.result)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.head_box {
  width: 100%;
  height: 3.125rem /* 50/16 */;
  display: flex;
  justify-content: space-between;
}
.search_select {
  width: 8.75rem /* 140/16 */;
  height: 1.875rem /* 30/16 */;
  text-indent: 4px;
  @include themify($themes) {
    background-image: themed('select_bj');
    background-position: -7px -1px;
    background-size: 154px 40px;
    background-repeat: no-repeat;
    background-color: themed('yjzy_bg_search');
    border: none;
    outline: none;
    appearance: none;
    // border: 1px solid themed('yjzy_color_search');
    color: themed('yjzy_color_search');
  }
  // background: rgba(70, 159, 255, 0.1);
  // border: 1px solid #72e6ff;
  // box-shadow: 1px 4px 6px 0px #0c1422;
  outline: none;
  font-size: 12px;
  font-weight: 600;
  // color: #72e6ff;
  line-height: 24px;
}
select option {
  color: black;
}
.search_box {
  width: 8.75rem /* 140/16 */;
  height: 1.875rem /* 30/16 */;
  overflow: hidden;
  // background-image: url(../../assets/images/search_box_bj.png);
  position: relative;
  @include themify($themes) {
    background: themed('bz-point-search-bgColor');
  }
}
.search_icon {
  @include themify($themes) {
    background-image: themed('search_icon');
  }
  width: 11px;
  height: 11px;
  position: absolute;
  top: 9px;
  left: 6px;
  cursor: pointer;
}
.search {
  width: 100%;
  height: 30px;
  outline: none;
  font-size: 12px;
  line-height: 24px;
  background: none;
  border: none;
  margin-left: 20px;
  @include themify($themes) {
    color: themed('search_font1');
  }
}
.closeBtn {
  width: 3.25rem /* 52/16 */;
  height: 3.25rem /* 52/16 */;
  position: absolute;
  cursor: pointer;
  @include themify($themes) {
    background: themed('bz-point-close-bg1');
    background-repeat: no-repeat;
    top: themed('yjzy_closeBtn_position_t');
    right:themed('yjzy_closeBtn_position_r');
  }
}
.tab_box {
  width: 31.25rem /* 500/16 */;
  height: 100%;
  @include themify($themes) {
    background: themed('bz-point-bg');
  }
  // background-image: url('../../assets/images/dispatch_list_bj.png');
  background-size: 100% 100%;
  margin-left: auto;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.625rem /* 10/16 */;
  box-sizing: border-box;
  z-index: 99;
  animation: inBox .5s linear;
}
.tab_box .container table thead tr {
  @include themify($themes) {
    // background: themed('yjzy_bg_Wbg_tabThTwo');
  }
  opacity: 0.5;
  border-bottom: 1px solid #ffffff;
  display: flex;
  justify-content: space-around;
  width: 98%;
}
.tab_box .container table tbody {
  width: 100%;
  // max-height: 767px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  // border-bottom:1px solid rgba(255,255,255,0.5);
  box-sizing: border-box;
  padding: 10px 0;
}
.bg td {
  @include themify($themes) {
    background: themed('tj_color');
  }
  // background: #1b393f;
}
.trBg{
    @include themify($themes) {
    background: themed('tr_bgcolor');
    color: #fff;
  }
}
.container table {
  @include themify($themes) {
    color: themed('tj_color');
  }
  // color: #e6e6e6;
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.conatiner table thead,
tbody,
tr,
th,
td {
  display: inline-block;
}

.container table thead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  // background:#fff;
  cursor: pointer;
}

.container table thead tr {
  width: 100%;
  box-sizing: border-box;
  @include themify($themes) {
    color: themed('bz-point-table-head-font');
    border-bottom: 1px solid themed('bz-point-table-color');
  }
}
.container table tbody tr {
  width: 98%;
  line-height: 25px;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}

.container table tbody tr td {
  text-align: center;
}
.trClas {
  width: 33%;
  text-align: center;
}
// 滚动条整体部分
.tab_box .container table tbody::-webkit-scrollbar {
  width: 4px;
}
//滚动条里面的滑块
.tab_box .container table tbody::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('bz-scrollbar-thumb-color');
  }
}
//滚动条的轨道
.tab_box .container table tbody::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('bz-scrollbar-track-color');
  }
}
input::-webkit-input-placeholder {
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
@keyframes inBox {
  0% {
    left: -500px;
  }
  90% {
    left: 20px;
  }
  100% {
    left: 0;
  }
}
</style>
